<template>
    <div>
        <div>
            <Row>
                <Col span="24">
                    <span style="font-weight: bold;font-size: small">活动名称：</span><Input v-model="queryData.name" style="width:  120px"></Input>
                    <span style="font-weight: bold;font-size: small">活动时间：</span><DatePicker type="date" style="width: 200px"></DatePicker>
                    <Button type="primary" icon="android-search">查询</Button>
                    <Button type="primary" icon="refresh">重置</Button>
                </Col>
            </Row>
            <Row style="margin-top: 15px;">
                <Col span="24">
                    <Button type="error" icon="minus" @click="doDelBath">批量退回活动</Button>
                </Col>
            </Row>
        </div>
        <div class="main-table">
            <Table border  :columns="columns" :data="dataList" :highlight-row="true" @on-selection-change="whenSelectRow"></Table>
        </div>
        <div class="pagination">
            <Page border :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="doQuery" show-total show-elevator></Page>
        </div>
        <Modal
                title="活动报名"
                v-model="addVisible"
                :loading="saveLoading"
                :closable="true"
                width="75%"
                :transfer="false"
        >
            <div>
                <h3>已报名学员</h3>
                <div>
                    <Row style="font-size: 15px;">
                        <Col span="24">
                            学生姓名：<Input v-model="queryDataApply.studentName" clearable style="width: 150px"></Input>
                            <!--性别：-->
                            <!--<Select v-model="query.gender" style="width:15%" filterable clearable>-->
                                <!--<Option v-for="item in sexList" :value="item.id" :key="item.id">{{item.name}}</Option>-->
                            <!--</Select>-->
                            <!--学历：-->
                            <!--<Select v-model="query.educationid" style="width:15%" filterable clearable>-->
                                <!--<Option v-for="item in learnList" :value="item.id" :key="item.id">{{item.name}}</Option>-->
                            <!--</Select>-->
                            <!--教师类型：-->
                            <!--<Select v-model="query.teachertypeid" style="width:15%" filterable clearable>-->
                                <!--<Option v-for="item in teachertypeList" :value="item.id" :key="item.id">{{item.name}}</Option>-->
                            <!--</Select>-->
                            <span @click=""><Button type="primary" icon="android-search" @click="findApplyInfo">查询</Button></span>
                            <span @click=""><Button type="primary" icon="reload" @click="reloadApplys">清空</Button></span>
                        </Col>
                    </Row>
                    <!--<Row style="font-size: 15px;;margin-top: 5px">-->
                        <!--<Col span="22">-->

                        <!--</Col>-->
                    <!--</Row>-->
                </div>
                <div class="main-table">
                    <Table border  :columns="applyColumns" :data="applyDataList" :highlight-row="true"></Table>
                </div>
                <div class="pagination">
                    <Page border :total="totalApply" size="small" :page-size="pageApplySize" :current.sync="pageApplyIndex" @on-change="findApplyInfo" show-total show-elevator></Page>
                </div>
                <h3>学员报名</h3>
                <div style="margin-top: 15px;">
                    <Form :label-width="100" :model="formData" :rules="formDataRules" ref="formData">
                        <Row>
                            <Col span="8">
                                <FormItem label="学生姓名:" prop="name">
                                    <Input v-model="formData.name" style="width:200px" @on-blur="queryStudentByName"></Input>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem label="联系电话:">
                                    <Input v-model="formData.parentphone" style="width:200px"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="8">
                                <FormItem label="年级阶段:">
                                    <Select v-model="formData.gradeid" style="width: 200px;">
                                        <!--<Option v-for="item in majorLevelList" :value="item.id" :key="item.id">{{item.name}}-->
                                        <!--</Option>-->
                                        <Option v-for="item in gradeList" :value="item.id" :key="item.id">{{item.name}}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem label="出生日期:" >
                                    <DatePicker v-model="formData.birthdate" style="width:200px"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem label="年龄:">
                                    <Input v-model="formData.age" style="width:200px"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center">
                            <Col span="8">
                                <FormItem>
                                    <Button type="primary" @click="doApply" :loading="applyLoading">报名</Button>
                                    <Button style="margin-left: 8px" @click="formData={}">重置</Button>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </div>
            </div>
        </Modal>

        <Modal v-model="weChatPayModal"
               title="支付中心条码支付"
               width="300px"
               :transfer="false"
               :closable="true"
        >
            <div style="text-align: center">
                <h3>使用扫码枪扫描用户出示的支付条码</h3>
                <h3 style="color: red;">注意：扫码前请确保光标在输入框内</h3>
                <Input v-model="payNum" clearable style="width: 200px;margin-top: 20px;"></Input>
            </div>
            <div slot="footer">
                <Button type="primary" @click="payByWechat" :loading="payLoading">支付</Button>
                <Button type="ghost" style="margin-left: 8px" @click="weChatPayModal = false">取消</Button>
            </div>
        </Modal>

    </div>
</template>
<style lang="less" scoped src="../public.less"></style>
<script src="./activitybill.js"></script>
